<template>
    <view class="common-car">
        <view class="head" v-if="!isEmpty">
            <!-- #ifdef APP-PLUS || H5 -->
            <view class="title">购物车</view>
            <!-- #endif -->
            <!-- <view class="edit" @click="isEdit = !isEdit">
                <text>{{ isEdit ? "完成" : "编辑" }}</text>
            </view> -->
            <view class="edit">
                <text @tap="cut">{{isCut?'编辑':'完成'}}</text>
            </view>
        </view>
        <view class="pdbox"></view>
        <view class="empty-shop-car" v-if="isEmpty">
            <image :src="$imgUrl+'mall/empty_shop_car.png'" class="empty-shop-car-image" mode=""></image>
            <text>当前您的购物车是空的</text>
            <navigator class="empty-shop-car-btn" url="/pages/mall/index" open-type="switchTab" hover-class="other-navigator-hover">
                <text>去逛逛</text>
            </navigator>
        </view>
        <view class="shop-car" v-else>
            <view class="store-box" v-for="(itemq,indexq) in datas" :key="indexq">
                <view class="store-header" v-if="itemq.name && itemq.goods.length>0">
                    <image :src="$imgUrl+'mall/select.png'" v-if="itemq.checked == 2" class="checked-image" mode="" @tap="storeCheck(indexq,itemq.checked)"></image>
                    <image :src="$imgUrl+'mall/not_select.png'" v-else class="checked-image" mode="" @tap="storeCheck(indexq,itemq.checked)">
                    </image>
                    <text>{{itemq.name}}</text>
                    <image :src="$imgUrl+'mall/youjiantou1.png'" class="label" mode=""></image>
                </view>
                <view v-for="(itemw,indexw) in itemq.goods" :key="indexw">
                    <!-- <uni-swipe-action ref="swipeAction">
                        <uni-swipe-action-item v-for="(item, index) in swipeList" :right-options="item.options" :key="item.id" @change="swipeChange($event, index)"
                            @click="swipeClick($event, index)"> -->
                    <view class="goodsInfo content-box">
                        <image :src="$imgUrl+'mall/select.png'" v-if="itemw.checked == 2" class="checked-image" mode="" @tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
                        <image :src="$imgUrl+'mall/not_select.png'" v-else class="checked-image" mode="" @tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
                        <view class="goodsInfo-right">
                            <view class="pic">
                                <image :src="itemw.goods_cover" class="goods-image" mode="aspectFill"></image>
                            </view>
                            <view class="goodsInfo-box">
                                <text class="goods-name">{{itemw.goods_name}}</text>
                                <text class="spe">{{itemw.specify}}</text>
                                <view class="goods-box">
                                    <text class="goods-price">¥{{itemw.unit_price}}</text>
                                    <view class="goods-num-box">
                                        <view class="goods-image" @click.stop="sub(indexq,indexw,itemw.number,itemw)">
                                            <text>-</text>
                                        </view>
                                        <view class="goods-num">
                                            <!-- <text>{{itemw.number}}</text> -->
                                            <input type="number" maxlength="2" disabled v-model="itemw.number" @input.stop="handleNum(indexq,indexw,itemw.number)"
                                                @focus="_onFocus(indexq,indexw,itemw.number)" @blur="_onBlur(indexq,indexw,itemw.number)" class="uni-numbox__value" />
                                            <!-- onkeyup="itemw.number=itemw.number.replace(/\D|^0/g,'')" -->
                                        </view>
                                        <view class="goods-image" @click.stop="add(indexq,indexw,itemw.number,itemw)">
                                            <text>+</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- </uni-swipe-action-item>
                    </uni-swipe-action> -->
                </view>
            </view>
            <view class="statistics-box">
                <view class="statistics">
                    <view class="leftbox">
                        <view class="statistics-left" v-if="statisticsIndex" @tap="allCheck">
                            <image :src="$imgUrl+'mall/select.png'" class="checked-image" mode="">
                            </image>
                            <text>全选</text>
                        </view>
                        <view class="statistics-left" v-else @tap="allCheck">
                            <image :src="$imgUrl+'mall/not_select.png'" class="checked-image" mode="">
                            </image>
                            <text>全选</text>
                        </view>
                        <view class="statistics-center">
                            <text>合计：</text><text class="text-color">¥{{total}}</text>
                        </view>
                    </view>

                    <view class="statistics-right" v-if="isCut" @tap="accounts">
                        <view class="btn">
                            <text>去结算</text>
                        </view>
                    </view>
                    <view class="statistics-right" v-else @tap="delect">
                        <view class="btn">
                            <text>删除</text>
                        </view>
                    </view>
                </view>
                <view class="gap"></view>
            </view>
        </view>
        <slot></slot>
    </view>
</template>

<script>
import { incCart, decCart } from "@/api/mall.js"
export default {
    name: "commonCar",
    data() {
        return {
            isEmpty: true,
            iPhoneX: false,
            datas: {},
            statisticsIndex: false,
            total: 0,
            isCut: true,
            swipeList: [
                {
                    id: 1,
                    options: [{
                        text: '置顶'
                    },
                    {
                        text: '删除',
                        style: {
                            backgroundColor: 'rgb(255,58,49)'
                        }
                    }
                    ],
                    content: 'item2'
                }],
            $imgUrl: this.$imgUrl,
        }
    },
    props: {
        list: {
            type: [Object, Array],
            default: {}
        }
    },
    created() {
        this.iPhoneX = uni.getStorageSync('iPhoneX')
        if (this.list.length == 0) {
            this.isEmpty = true
        } else {
            this.datas = this.list
            this.isEmpty = false
        }
    },
    methods: {
        //商品选择
        goodsCheck(storeIndex, goodsIndex, goodsChecked) {
            if (goodsChecked == 1) {
                this.datas[storeIndex].goods[goodsIndex].checked = 2
            } else {
                this.datas[storeIndex].goods[goodsIndex].checked = 1
            }
            //判断是否该店铺全选
            let storeChecked = true
            this.datas[storeIndex].goods.map((item, index) => {
                if (item.checked == 1) {
                    storeChecked = false
                }
            })
            if (storeChecked == false) {
                this.datas[storeIndex].checked = 1
            } else {
                this.datas[storeIndex].checked = 2
            }

            //判断是否全选
            let statisticsIndex = true
            this.datas.find((item, index) => {
                if (item.checked == 1) {
                    statisticsIndex = false
                }
            })
            if (statisticsIndex == false) {
                this.statisticsIndex = false
            } else {
                this.statisticsIndex = true
            }

            this.statistics()
        },
        //店铺选择
        storeCheck(storeIndex, storeCheck) {
            if (storeCheck == 1) {
                this.datas[storeIndex].checked = 2
                this.datas[storeIndex].goods.find((item, index) => {
                    item.checked = 2
                })
            } else {
                this.datas[storeIndex].checked = 1
                this.datas[storeIndex].goods.find((item, index) => {
                    item.checked = 1
                })
            }
            //判断是否全选
            let statisticsIndex = true
            this.datas.find((item, index) => {
                if (item.checked == 1) {
                    statisticsIndex = false
                }
            })
            if (statisticsIndex == false) {
                this.statisticsIndex = false
            } else {
                this.statisticsIndex = true
            }
            this.statistics()
        },
        _onFocus(storeIndex, goodsIndex, goodsnum) {
            this.refreshNum(storeIndex, goodsIndex, goodsnum)
        },
        _onBlur(storeIndex, goodsIndex, goodsnum) {
            this.refreshNum(storeIndex, goodsIndex, goodsnum)
        },

        handleNum(storeIndex, goodsIndex, goodsnum) {
            let value = goodsnum.replace(/^(0+)|[^\d]+/g, ''); // 以0开头或者输入非数字，会被替换成空
            console.log(value, value, 123)
            this.refreshNum(storeIndex, goodsIndex, value)
        },
        refreshNum(storeIndex, goodsIndex, goodsnum) {
            this.$set(this.datas[storeIndex].goods[goodsIndex], "number", goodsnum)
            this.statistics()
        },
        //减少
        sub(storeIndex, goodsIndex, goodsnum, row) {
            if (goodsnum == 1) {
                this.$message("商品数量不能再减少了")
                return
            } else {
                decCart({ marking: row.marking }).then(res => {
                    if (res.code == 1) {
                        this.datas[storeIndex].goods[goodsIndex].number--
                        this.statistics()
                    }
                })
            }
        },
        //增加
        add(storeIndex, goodsIndex, goodsnum, row) {
            incCart({ marking: row.marking }).then(res => {
                if (res.code == 1) {
                    this.datas[storeIndex].goods[goodsIndex].number++
                    this.statistics()
                }
            })
        },
        //全选
        allCheck() {
            if (this.statisticsIndex) {
                this.datas.find((item, index) => {
                    item.checked = 1
                    item.goods.find((itemq, indexq) => {
                        itemq.checked = 1
                    })
                })
                this.statisticsIndex = false
            } else {
                this.datas.find((item, index) => {
                    item.checked = 2
                    item.goods.find((itemq, indexq) => {
                        itemq.checked = 2
                    })
                })
                this.statisticsIndex = true
            }
            this.statistics()
        },
        //统计
        statistics() {
            let total = 0
            this.datas.find((item, index) => {
                item.goods.find((itemq, indexq) => {
                    if (itemq.checked == 2) {
                        total = total + itemq.unit_price * itemq.number
                    }
                })
            })
            this.total = total.toFixed(2)
        },
        cut() {
            this.isCut = !this.isCut
            this.statisticsIndex = true
            this.allCheck()
        },
        accounts() {
            let judge = this.judgeSelect()
            if (judge) {
                this.$emit('accounts', this.getSelectData())
            } else {
                let text = '您当前未选择任何商品,结算失败'
                this.showToast(text)
            }
        },
        delect() {
            let judge = this.judgeSelect()
            if (judge) {
                this.$emit('delect', this.getSelectData())
            } else {
                let text = '您当前未选择任何商品,删除失败'
                this.showToast(text)
            }

        },
        getSelectData() {
            let data = []
            this.datas.find((item, index) => {
                item.goods.find((itemq, indexq) => {
                    if (itemq.checked == 2) {
                        data.push(itemq)
                    }
                })
            })
            return data
        },
        showToast(message) {
            uni.showToast({
                title: message,
                icon: 'none'
            })
        },
        judgeSelect() {
            let judge = false
            this.datas.find((item, index) => {
                item.goods.find((itemq, indexq) => {
                    if (itemq.checked == 2) {
                        judge = true
                    }
                })
            })
            return judge
        },
        swipeChange(e, index) {
            console.log('返回：', e);
            console.log('当前索引：', index);
        },
        swipeClick(e, index) {
            let {
                content
            } = e;
            if (content.text === '删除') {
                uni.showModal({
                    title: '提示',
                    content: '是否删除',
                    success: res => {
                        if (res.confirm) {
                            this.swipeList.splice(index, 1);
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            } else if (content.text === '添加') {
                if (this.swipeList.length < 10) {
                    this.swipeList.push({
                        id: new Date().getTime(),
                        options: [{
                            text: '置顶'
                        },
                        {
                            text: '标记为已读',
                            style: {
                                backgroundColor: 'rgb(254,156,1)'
                            }
                        },
                        {
                            text: '删除',
                            style: {
                                backgroundColor: 'rgb(255,58,49)'
                            }
                        }
                        ],
                        content: '新增' + new Date().getTime()
                    });
                    uni.showToast({
                        title: `添加了一条数据`,
                        icon: 'none'
                    });
                } else {
                    uni.showToast({
                        title: `最多添加十条数据`,
                        icon: 'none'
                    });
                }
            } else {
                uni.showToast({
                    title: `点击了${e.content.text}按钮`,
                    icon: 'none'
                });
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.common-car {
  width: 750rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
  .head {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80rpx;
    /* #ifdef APP-PLUS */
    height: calc(100rpx + var(--status-bar-height));
    padding-top: var(--status-bar-height);
    /* #endif */
    background-color: #ffffff;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 30rpx;
      color: #212121;
    }

    .edit {
      position: absolute;
      right: 20rpx;
      top: 50%;
      /* #ifdef APP-PLUS */
      top: calc(50rpx + var(--status-bar-height));
      /* #endif */
      transform: translate(0, -50%);

      text {
        color: #212121;
        font-size: 26rpx;
      }
    }
  }
}
.pdbox {
  margin-top: 120rpx;
  /* #ifdef APP-PLUS */
  margin-top: calc(120rpx + var(--status-bar-height));
  /* #endif */
}
.empty-shop-car {
  width: 750rpx;
  min-height: 680rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .empty-shop-car-image {
    width: 340rpx;
    height: 278rpx;
    margin-top: 102rpx;
  }

  text {
    margin-top: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
  }

  .empty-shop-car-btn {
    width: 240rpx;
    height: 90rpx;
    background: $base;
    border-radius: 200rpx;
    margin-top: 40rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #313133;
    text {
      color: #ffffff;
    }
  }
}

.shop-car {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 200rpx;
  .shop-car-header {
    width: 690rpx;
    height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    text {
      font-size: 28rpx;
      font-weight: 400;
      color: #313133;
    }
  }

  .store-box {
    width: 750rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;

    .store-header {
      width: 690rpx;
      height: 78rpx;
      padding: 0 30rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #313133;

      .checked-image {
        width: 42rpx;
        height: 42rpx;
      }

      text {
        font-size: 28rpx;
        font-weight: 400;
        color: #313133;
        margin-left: 20rpx;
      }

      .label {
        width: 14rpx;
        height: 24rpx;
        margin-left: 10rpx;
        margin-top: 5rpx;
      }
    }

    .goodsInfo {
      width: 690rpx;
      height: 246rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 2rpx solid #ededed;

      &:nth-last-child(1) {
        border: none;
      }

      .checked-image {
        width: 42rpx;
        height: 42rpx;
      }

      .goodsInfo-right {
        width: 634rpx;
        height: 246rpx;
        margin-left: 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        .pic {
          width: 180rpx;
          height: 180rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .goods-image {
            // width: 180rpx;
            height: 180rpx;
          }
        }

        .goodsInfo-box {
          width: 428rpx;
          margin-left: 24rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .goods-name {
            width: 428rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #313133;
          }

          .spe {
            width: 428rpx;
            margin-top: 10rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #919298;
          }

          .goods-box {
            width: 428rpx;
            margin-top: 18rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            .goods-price {
              font-size: 32rpx;
              font-weight: 400;
              color: #313133;
            }

            .goods-num-box {
              width: 168rpx;
              height: 46rpx;
              display: flex;
              flex-direction: row;
              align-items: center;
              z-index: 1;
              .goods-image {
                width: 46rpx;
                height: 44rpx;
                text-align: center;
                line-height: 44rpx;
                border: 1rpx solid #cfcfcf;
                font-size: 38rpx;
              }

              .goods-num {
                width: 76rpx;
                height: 44rpx;
                text-align: center;
                line-height: 44rpx;
                font-size: 33rpx;
                font-weight: 400;
                color: #666666;
                border-top: 1px solid #cfcfcf;
                border-bottom: 1px solid #cfcfcf;
              }
            }
          }
        }
      }
    }
  }

  .statistics-box {
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    z-index: 10;
    .statistics {
      width: 720rpx;
      padding: 0 0 0 30rpx;
      height: 98rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .leftbox {
        display: flex;
        align-items: center;
        .statistics-left {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          image {
            width: 36rpx;
            height: 36rpx;
          }

          text {
            font-size: 30rpx;
            font-weight: 400;
            padding-left: 20rpx;
            color: #313133;
          }
        }
        .statistics-center {
          padding-left: 20rpx;
          text {
            font-size: 30rpx;
            font-weight: 400;
            color: #313133;
          }
          .text-color {
            color: rgba(242, 18, 18, 1);
          }
        }
      }

      .statistics-right {
        // width: 600rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        text {
          font-size: 30rpx;
          font-weight: 400;
          color: #313133;
        }
        .btn {
          width: 218rpx;
          height: 98rpx;
          background-color: #ea5504;
          text-align: center;
          line-height: 98rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #313133;
          margin-left: 40rpx;
          z-index: 10;
          text {
            color: #ffffff;
          }
        }

        .text-color {
          color: rgba(242, 18, 18, 1);
        }
      }
    }

    .gap {
      width: 750rpx;
      height: 40rpx;
    }
  }
}
</style>
